import {imagesUrl} from '@/libs/baseUrl'
import {CImage} from '../image'
import {CnBoldSpan} from '../text'

export const ProductFilesItem = defineComponent({
  setup(props, ctx) {
    return () => (
      <div class='' title='产品资料-标准设置,产品资料'>
        <div class='h-full inline-grid grid-cols-2 pb-28 gap-x-20'>
          <div
            class='flex items-center w-280 h-108 px-35 transition-all duration-300 transform hover:-translate-y-4'
            style={{
              backgroundImage: `url(${imagesUrl('product-introduction-bg')})`,
              backgroundSize: '100% 100%'
            }}
          >
            <CImage
              imgName='product-introduction-active'
              class='w-62 h-62 mr-16 cursor-pointer'
            ></CImage>
            <CnBoldSpan class='text-20 text-white'>产品介绍</CnBoldSpan>
          </div>

          <div
            class='flex items-center w-280 h-108 px-35 transition-all duration-300 transform hover:-translate-y-4'
            style={{
              backgroundImage: `url(${imagesUrl('product-operateVideo-bg')})`,
              backgroundSize: '100% 100%'
            }}
          >
            <CImage
              imgName='product-operateVideo-active'
              class='w-62 h-62 mr-16 cursor-pointer'
            ></CImage>
            <CnBoldSpan class='text-20 text-white'>演示视频</CnBoldSpan>
          </div>
        </div>
      </div>
    )
  }
})
